<script lang="ts">
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
    name: "SpecScroll",
    components: {
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            swiperOption: {
                slidesPerView: 5,
                navigation: {
                    nextEl: '.next',
                    prevEl: '.prev'
                }
            }
        }
    }
}
</script>

<template>
    <div class="specScroll">
        <!--左按钮-->
        <a class="prev">&lt;</a>
        <swiper class="swiper" :options="swiperOption">
            <swiper-slide v-for="item in $store.state.product.goodsInfo.skuInfo.imgs" :key="item.id">
                <img @click="$store.commit('product/SET_DEFAULT_IMG',item.id)" :class="{active:item.default}" :src="'/img'+item.url">
            </swiper-slide>
        </swiper>
        <!-- 中间可滑动区域 -->
        <!--右按钮-->
        <a class="next">&gt;</a>
    </div>
</template>

<style scoped lang="less">
.specScroll{
    margin-top: 5px;
    width: 400px;
    overflow: hidden;
    display: flex;
    .prev,.next{
        text-align: center;
        width: 10px;
        height: 54px;
        line-height: 54px;
        border: 1px solid #CCC;
        background: #EBEBEB;
        cursor: pointer;
    }
    .prev{
        float: left;
        margin-right: 4px;
    }
    .next{
        float: right;
    }
    img{
        border: 1px solid #CCC;
        padding: 2px;
        width: 50px;
        height: 50px;
        margin: 0 8px ;
        &.active{
            border: 1px solid red;
        }
    }
}
</style>
